import xTextarea from "./xTextarea.js";
import {replaceByObj,format} from "./xUtil.js";

const tmplCell =  '<div {{style}}  {{dataCode}} {{width}} type="{{type}}">{{cell}}</div>';
const tmplCellStyle ='class ="cell {{align}} {{style}}"';
const tmplWidth ='style="width:{{width}}"';
const tmplMinWidth = 'style="min-width:{{width}}"';

const tmplMaxSize = 'style="max-width:{{width}};max-height:{{height}}"';

const tmplImg = '<img src ="{{icon}}" {{size}}/>';
const tmplIcon  = '<i class="iconfont {{icon}} {{iconStyle}}" type="{{type}}"></i>';
const tmplTextarea = '<textarea readonly="readonly" rows="{{rows}}">{{data}}</textarea>';
const tmplData = '<span type="data" {{hint}} >{{data}}</span>';

const tmplTreeData = '<span type="{{type}}"  {{hint}} >{{data}}</span>';

const tmplHtml ='<div type="html">{{html}}</div>';
const tmplLevel ='<span class="level-{{level}}" type="level"></span>';
const tmplCellBadge = '<span class="{{badge}}" type="badge"></span>';
const tmplProgress =
    `<div class="progress" title="{{progress}}">
        <div class="progress-bar {{style}}" style="width:{{progress}}" >{{progress}}</div>
     </div>`;

const tmplLabel = '<label>{{data}}</label>';

const tmplCheckbox ='<input  type="checkbox" {{attr}} class="form-check-input"/>';
const tmplRadio ='<input   name="{{name}}" {{attr}} type="radio" class="form-check-input"/>';
const tmplDataCode ='data-code="{{code}}"';
const tmplHint ='title="{{hint}}"';
const tmplTag = '<span type="tag" {{style}} >{{name}}</span>';
const tmplLink =`{{level}} {{expand}} {{check}}
                   <a target ="{{linkTarget}}" href="{{link}}" type="link"> 
                      {{icon}} {{data}} {{badge}} 
                   </a>`;

const tmplMenuLink = ` <span target ="{{linkTarget}}" href="{{link}}" type="menu-link"> 
                        {{level}} {{icon}} {{data}} {{badge}} 
                      </span> {{drop}}`;


const tmplButton = `<button title="{{title}}" class="btn {{style}}" type="button" index="{{index}}">
         <span class="{{icon}}">{{name}}</span>
    </button>
`;

const tmplFlatButton = `<span class="{{icon}} {{style}}" title="{{title}}" type="button"  index="{{index}}">
                       {{name}}
                      </span>`;
const tmplSearch =`<div type="search">
              <input placeholder="{{placeholder}}" class="form-control"/>
              <i class="iconfont icon-search after-icon-set"></i>
              </div>`;

const tmplFilter =`<span class="iconfont {{icon}}" type="{{type}}" checked="{{checked}}">{{name}}</span>` ;

const tmplUl = '<ul class="list-group">{{lis}}</ul>';

const tmplLi ='<li class="list-group-item">{{cell}}</li>';

const tmplSelectItem = `<label data-code="{{code}}" type="select-item">
                              {{icon}} {{data}} {{badge}}
                          </label> `;

const tmplSelectUl ='<ul>{{lis}}</ul>';
const tmplSelectLi ='<li class="{{type}}">{{cell}}</li>';

const tmplRate =`<span type="rate">
                     <i class="iconfont icon-f-star-left {{leftBright}}" ></i> 
                     <i class="iconfont icon-f-star-right {{rightBright}}"></i>
                  </span>`;

const tmplSwitch = `<span type="status-switch" class="{{status}}">
                         <span type="switch-name">{{name}}</span>
                         <i class="iconfont icon-f-circle"></i>
                         <span type="spin" class="spinner-border text-primary spinner-grow-sm"></span>
                    </span>`;

const tmplStatusButton = `<span type="status-button" class="{{status}}">
                         <span type="button-name" class="flat {{style}}">{{name}}</span>             
                         <span type="spin" class="spinner-border spinner-grow-sm"></span>
                    </span>`;

/*只做渲染用*/
export default class cell{

    static render(cfg){
        let html = '';
        switch(cfg.type){
            case 'xtextarea':
                html = cell.renderXTextarea(cfg);
                break;
            case 'textarea':
                html = cell.renderTextarea(cfg);
                break;
            case 'tag':
                html = cell.renderTag(cfg);
                break;
            case 'image':
                html = cell.renderImage(cfg);
                break;
            case 'tree':
                html = cell.renderTree(cfg);
                break;
            case 'progress':
                html = cell.renderProgress(cfg);
                break;
            case 'label':
                html = cell.renderLabel(cfg);
                 break;
            case 'expand':
                html = cell.renderExpand(cfg);
                break;
            case 'checkbox':
                html = cell.renderCheckbox(cfg);
                break;
            case 'radio':
                html = cell.renderRadio(cfg);
                break;
            case 'button':
                html = cell.renderButton(cfg);
                break;
            case 'search':
                html = cell.renderSearch(cfg);
                break;
            case 'filter':
                html = cell.renderFilterCell(cfg);
                break;
            case 'html':
                html = cell.renderHtml(cfg);
                break;
            case 'data':
            default:
                html= cell.renderData(cfg);
        }
        return html;
    }

    static renderData(cfg){
        let [iconHtml,levelHtml,badgeHtml,dataHtml] = ['','','',''];
        if(cfg.icon){
            iconHtml = replaceByObj(tmplIcon,{icon:cfg.icon,
                iconStyle:cfg.iconStyle||'',type:''
            })
        }
        if(cfg.image){
            iconHtml = replaceByObj(tmplImg,{icon:cfg.image,size:'',
                iconStyle:cfg.iconStyle||''
            })
        }
        if(cfg.level)
            levelHtml = tmplLevel.replace('{{level}}',cfg.level);

        if(cfg.badge)
            badgeHtml = tmplCellBadge.replace("{{badge}}",cfg.badge);

        if(cfg.data){
            dataHtml = replaceByObj(tmplData,{hint:(cfg.hint?tmplHint.replace('{{hint}}',cfg.hint):''),
                data:cfg.format?format(cfg.data,cfg.format):(cfg.data??'')});
        }

        let widthHtml='';
        if(cfg.width)
            widthHtml = tmplWidth.replace('{{width}}',cfg.width);
        if(cfg.minwidth)
            widthHtml = tmplMinWidth.replace('{{width}}',cfg.width);

        let cellHtml ='';
        if(cfg.link)
            cellHtml = replaceByObj(tmplLink,{level:levelHtml,expand:'',check:'',link:cfg.link,
                icon:iconHtml,data:dataHtml,badge:badgeHtml,linkTarget:cfg.linkTarget??'_blank'});
        else
            cellHtml = levelHtml+iconHtml+dataHtml+badgeHtml;

        return replaceByObj(tmplCell,{cell:cellHtml,width:widthHtml,type:cfg.type||'data',
            style:replaceByObj(tmplCellStyle,{align:cfg.align||'center',style:cfg.style||''}),
            dataCode:cfg.code?tmplDataCode.replace("{{code}}",cfg.code):''});
    }

    static renderTree(cfg){
        let [iconHtml,levelHtml,badgeHtml,dataHtml] = ['','','',''];
        if(cfg.icon){
            iconHtml = replaceByObj(tmplIcon,{icon:cfg.icon,
                iconStyle:cfg.iconStyle||'',type:''
            })
        }
        if(cfg.image){
            iconHtml = replaceByObj(tmplImg,{icon:cfg.image,size:'',
                iconStyle:cfg.iconStyle||''
            })
        }
        if(cfg._level)
            levelHtml = tmplLevel.replace('{{level}}',cfg._level);

        if(cfg.badge)
            badgeHtml = tmplCellBadge.replace("{{badge}}",cfg.badge);

        if(cfg.data){
            dataHtml = replaceByObj(tmplTreeData,{hint:(cfg.hint?tmplHint.replace('{{hint}}',cfg.hint):''),
                type:cfg._virtual?'virtual':'data',
                data:cfg.format?format(cfg.data,cfg.format):(cfg.data??'')});
        }

        let widthHtml='';
        if(cfg.width)
            widthHtml = tmplWidth.replace('{{width}}',cfg.width);
        if(cfg.minwidth)
            widthHtml = tmplMinWidth.replace('{{width}}',cfg.minwidth);

        let checkHtml ='';
        if(cfg.checkable){
            let checkIcon = cfg._check==1?'icon-check-1':cfg._check==2?'icon-check-2':'icon-check-0';
            checkHtml = replaceByObj(tmplIcon,{icon:checkIcon,
                iconStyle:cfg._check?'active':'',type:"tree-check"});
        }

        let expandHtml ='';
        if(cfg.hasChildren){
            if(cfg._expand==false){
                expandHtml = replaceByObj(tmplIcon,{icon:'icon-expand-0', iconStyle:'',type:"tree-expand"});
            }else{
                expandHtml = replaceByObj(tmplIcon,{icon:"icon-expand-1", iconStyle:'',type:"tree-expand"});
            }
        }else{
            //位置保留
            expandHtml = replaceByObj(tmplIcon,{icon:'icon-null',iconStyle:'',type:""});
        }

        let cellHtml ='';
        if(cfg.link)
            cellHtml = replaceByObj(tmplLink,{level:levelHtml,expand:expandHtml,check:checkHtml,link:cfg.link,
                icon:iconHtml,data:dataHtml,badge:badgeHtml,linkTarget:cfg.linkTarget??'_blank'});
        else
            cellHtml = levelHtml+expandHtml+checkHtml+iconHtml+dataHtml+badgeHtml;

        return replaceByObj(tmplCell,{cell:cellHtml,width:widthHtml,type:cfg.type||'tree',
            style:replaceByObj(tmplCellStyle,{align:cfg.align||'',style:cfg.style||''}),
            dataCode:cfg.code?tmplDataCode.replace("{{code}}",cfg.code):''});
    }

    static renderTextarea(cfg){
        return replaceByObj(tmplCell,{cell:replaceByObj(tmplTextarea,{data:cfg.data,rows:cfg.rows||5}),
            width:'',type:cfg.type,
            style:replaceByObj(tmplCellStyle,{align:'',style:cfg.style||''}),
            dataCode:cfg.code?tmplDataCode.replace("{{code}}",cfg.code):''});
    }

    static renderXTextarea(cfg){
        return replaceByObj(tmplCell,{cell:xTextarea.onlyRender(cfg),
            width:'',type:cfg.type,
            style:replaceByObj(tmplCellStyle,{align:'',style:cfg.style||''}),
            dataCode:cfg.code?tmplDataCode.replace("{{code}}",cfg.code):''});
    }

    static renderTag(cfg){
        let cellHtml ='';
        let tags = cfg.data.split(',');
        for(let tag of tags){
            let tmp = tag.split(' ');
            cellHtml +=replaceByObj(tmplTag,{name:tmp[0]??'',
                style:tmp[1]?'class="'+tmp[1]+'"':''});
        }
        let widthHtml='';
        if(cfg.width)
            widthHtml = tmplWidth.replace('{{width}}',cfg.width);
        if(cfg.minwidth)
            widthHtml = tmplMinWidth.replace('{{width}}',cfg.width);

        return replaceByObj(tmplCell,{cell:cellHtml,  width:widthHtml,
            type:cfg.type,
            style:replaceByObj(tmplCellStyle,{align:cfg.align||'center',style:cfg.style||''}),
            dataCode:cfg.code?tmplDataCode.replace("{{code}}",cfg.code):''});
    }

    static renderProgress(cfg){
        let widthHtml='';
        if(cfg.width)
            widthHtml = tmplWidth.replace('{{width}}',cfg.width);
        if(cfg.minwidth)
            widthHtml = tmplMinWidth.replace('{{width}}',cfg.minwidth);

        let cellHtml = replaceByObj(tmplProgress,{style:cfg.style||'',
            progress:cfg.format?format(cfg.data,cfg.format):(cfg.data??'')});

        return replaceByObj(tmplCell,{cell:cellHtml,  width:widthHtml,
            type:cfg.type,
            style:replaceByObj(tmplCellStyle,{align:'',style:''}),
            dataCode:cfg.code?tmplDataCode.replace("{{code}}",cfg.code):''});
    }

    static renderImage(cfg){
        let cellHtml ='';
        let imgs = cfg.data.split(',');
        let [sizeHtml,w,h] =['','',''];
        if(cfg.size){
            let sizeArray = cfg.size.split('*');
            w = sizeArray[0]+'px';
            h = (sizeArray[1]?sizeArray[1]:w)+'px';
        }
        for(let img of imgs){
            if(cfg.size)
                sizeHtml = replaceByObj(tmplMaxSize,{width:w,height:h});

            cellHtml += replaceByObj(tmplImg,{icon:img,size:sizeHtml});
        }

        let widthHtml='';
        if(cfg.width)
            widthHtml = tmplWidth.replace('{{width}}',cfg.width);
        if(cfg.minwidth)
            widthHtml = tmplMinWidth.replace('{{width}}',cfg.minwidth);


        return replaceByObj(tmplCell,{cell:cellHtml,  width:widthHtml,
            type:cfg.type,
            style:replaceByObj(tmplCellStyle,{align:cfg.align||'',style:cfg.style||''}),
            dataCode:cfg.code?tmplDataCode.replace("{{code}}",cfg.code):''});
    }

    static renderLabel(cfg){
        return replaceByObj(tmplCell,{cell:replaceByObj(tmplLabel,{data:cfg.label||''}),
            width:'',type:cfg.type||'label',
            style:replaceByObj(tmplCellStyle,{align:'',style:cfg.style||''}),
            dataCode:cfg.code?tmplDataCode.replace("{{code}}",cfg.code):''});
    }

    static renderRadio(cfg){
        let widthHtml='';
        if(cfg.width)
            widthHtml = tmplWidth.replace('{{width}}',cfg.width);
        if(cfg.minwidth)
            widthHtml = tmplMinWidth.replace('{{width}}',cfg.minwidth);

        return replaceByObj(tmplCell,{cell:replaceByObj(tmplRadio,{name:cfg.radio||'',attr:cfg.attr||''}),
            width:widthHtml,type:cfg.type,
            style:replaceByObj(tmplCellStyle,{align:cfg.align||'center',style:cfg.style||''}),
            dataCode:cfg.code?tmplDataCode.replace("{{code}}",cfg.code):''});
    }

    static renderSwitch(cfg){
        let switchLabel =(cfg.switchLabel||'停用,启用').split(",");
        let widthHtml='';
        if(cfg.width)
            widthHtml = tmplWidth.replace('{{width}}',cfg.width);
        if(cfg.minwidth)
            widthHtml = tmplMinWidth.replace('{{width}}',cfg.minwidth);
        return replaceByObj(tmplCell,{cell:replaceByObj(tmplSwitch,
                {name:switchLabel[(cfg.data-0)==1?1:0],status:(cfg.data-0)==1?"checked":''}),
            width:widthHtml,type:cfg.type,
            style:replaceByObj(tmplCellStyle,{align:cfg.align||'center',style:cfg.style||''}),
            dataCode:cfg.code?tmplDataCode.replace("{{code}}",cfg.code):''});
    }

    static renderStatusButton(cfg){
        let statusLabel =(cfg.statusLabel||'停用,启用').split(",");
        let widthHtml='';
        if(cfg.width)
            widthHtml = tmplWidth.replace('{{width}}',cfg.width);
        if(cfg.minwidth)
            widthHtml = tmplMinWidth.replace('{{width}}',cfg.minwidth);
        return replaceByObj(tmplCell,{cell:replaceByObj(tmplStatusButton,
                {name:statusLabel[(cfg.data-0)==1?1:0],status:(cfg.data-0)==1?"checked":'',
                style:cfg.style||''}),
            width:widthHtml,type:cfg.type,
            style:replaceByObj(tmplCellStyle,{align:cfg.align||'center',style:''}),
            dataCode:cfg.code?tmplDataCode.replace("{{code}}",cfg.code):''});
    }

    static renderCheckbox(cfg){

        let widthHtml='';
        if(cfg.width)
            widthHtml = tmplWidth.replace('{{width}}',cfg.width);
        if(cfg.minwidth)
            widthHtml = tmplMinWidth.replace('{{width}}',cfg.minwidth);

        return replaceByObj(tmplCell,{cell:tmplCheckbox.replace("{{attr}}",cfg.attr||''),
            width:widthHtml,type:cfg.type,
            style:replaceByObj(tmplCellStyle,{align:cfg.align||'center',style:cfg.style||''}),
            dataCode:cfg.code?tmplDataCode.replace("{{code}}",cfg.code):''});
    }

    static renderExpand(cfg){
        let iconHtml='';
        if(cfg._expandMore){
            iconHtml =  replaceByObj(tmplIcon,{icon:'icon-down',iconStyle:'',type:'expand'})
        }else{
            iconHtml = replaceByObj(tmplIcon,{icon:'icon-right',iconStyle:'',type:'expand'})
        }
        return replaceByObj(tmplCell,{cell:iconHtml,
            width:'',type:cfg.type,
            style:replaceByObj(tmplCellStyle,{align:cfg.align||'center',style:cfg.style||''}),
            dataCode:cfg.code?tmplDataCode.replace("{{code}}",cfg.code):''});
    }

    static renderButton(cfg){
        let buttonHtml = '';
        let isFlat = false;
        let index = 0;
        for(let btn of cfg.button){
            if(btn.style && btn.style.indexOf('flat')>-1)
                isFlat = true;
            let cellHtml = '';

            if(isFlat){
                cellHtml = replaceByObj(tmplFlatButton,{title:btn.title||'',
                    icon:btn.icon||'',
                    style:btn.style||'',
                    index,
                    name:(btn.$name?cfg.data[btn.$name]:btn.name)||''}
                );
            }else{
                cellHtml = replaceByObj(tmplButton,{title:btn.title||'',
                    icon:btn.icon||'',
                    index,
                    style:btn.style||'',
                    name:(btn.$name?cfg.data[btn.$name]:btn.name)||''}
                );
            }
            buttonHtml += cellHtml;
            index +=1;
        }

        return replaceByObj(tmplCell,{cell:buttonHtml,
            width:'',type:cfg.type,
            style:replaceByObj(tmplCellStyle,{align:cfg.align||'center',style:''}),
            dataCode:cfg.code?tmplDataCode.replace("{{code}}",cfg.code):''});
    }

    static renderTHead(cfg){
        let cellHtml ;
        let [sortHtml,filterHtml,titleHtml]=['','',''];

        let widthHtml='';
        if(cfg.width)
            widthHtml = tmplMinWidth.replace('{{width}}',cfg.width);

        if(cfg.sort){
            switch(cfg.sortType){
                case 'asc':
                    sortHtml = replaceByObj(tmplIcon,{icon:'icon-sort-asc active',iconStyle:'',type:'sort'});
                    break;
                case 'desc':
                    sortHtml = replaceByObj(tmplIcon,{icon:'icon-sort-desc active',iconStyle:'',type:'sort'});
                    break;
                default:
                    sortHtml = replaceByObj(tmplIcon,{icon:'icon-sort',iconStyle:'',type:'sort'});
            }
        }

        if(cfg.filter){
            if(cfg.filterActive)
                filterHtml = replaceByObj(tmplIcon,{icon:'icon-f-filter active',iconStyle:'',type:'filter'});
            else
                filterHtml = replaceByObj(tmplIcon,{icon:'icon-f-filter',iconStyle:'',type:'filter'});
        }

        titleHtml = replaceByObj(tmplData,{data:cfg.title||'',hint:''});
        cellHtml = titleHtml+filterHtml+sortHtml;

        return replaceByObj(tmplCell,{cell:cellHtml,width:widthHtml,type:cfg.type||'data',
            style:replaceByObj(tmplCellStyle,{align:cfg.align||'center',style:cfg.style||''}),
            dataCode:cfg.code?tmplDataCode.replace("{{code}}",cfg.code):''});
    }

    static renderByCallback(cfg,callback){
        let widthHtml='';
        if(cfg.width)
            widthHtml = tmplWidth.replace('{{width}}',cfg.width);
        if(cfg.minwidth)
            widthHtml = tmplMinWidth.replace('{{width}}',cfg.minwidth);

        return replaceByObj(tmplCell,{cell:callback(cfg.data,cfg.pos),width:widthHtml,type:cfg.type||'data',
            style:replaceByObj(tmplCellStyle,{align:cfg.align||'center',style:cfg.style||''}),
            dataCode:cfg.code?tmplDataCode.replace("{{code}}",cfg.code):''});
    }

    static renderSearch(cfg){
        return tmplSearch.replace('{{placeholder}}',cfg.placeholder);

    }
    static renderHtml(cfg){
        return tmplHtml.replace('{{html}}',cfg.data);

    }

    static renderFilterCell(cfg){
        let icon;
        switch (cfg._checked){
            case false:
            case 0:
                icon = 'icon-check-0';
                break;
            case true:
            case 1:
                icon = 'icon-check-1';
                break;
            case 2:
                icon = 'icon-check-2';
                break;
        }
        let cellHtml = replaceByObj(tmplFilter,
            {name:cfg.name,icon,type:cfg.code==-1?'filter-all':'filter',
            checked:cfg._checked?"true":"false"});
        return replaceByObj(tmplCell,{cell:cellHtml,width:'',type:cfg.type||'',
            style:replaceByObj(tmplCellStyle,{align:'',style:cfg.style||''}),
            dataCode:cfg.code?tmplDataCode.replace("{{code}}",cfg.code):''});
    }

    static renderRate(cfg){
        let rateHtml ='';
        for(let i=1;i<6;i++){
            rateHtml += replaceByObj(tmplRate,{
                leftBright: cfg.rate*2>=i*2-1?'bright':'',
                rightBright:cfg.rate*2>=i*2?'bright':'',
            });
        }
        return replaceByObj(tmplCell,{cell:rateHtml,width:'',type:cfg.type||'rate',
            style:replaceByObj(tmplCellStyle,{align:cfg.align||'center',style:cfg.style||''}),
            dataCode:cfg.code?tmplDataCode.replace("{{code}}",cfg.code):''});
    }

    static renderLists(cfg){
        let listHtml = '';
        for(let list of cfg.data){
            listHtml += tmplLi.replace("{{cell}}",cfg.callback(list)) ;
        }
        return tmplUl.replace("{{lis}}",listHtml);
    }

    static renderSelectList(cfg){
        let listHtml = '';
        let group='';
        for(let list of cfg.data) {
            if (cfg.group && list.group != group) {
                group = list.group;
                listHtml += replaceByObj(tmplSelectLi,
                    {cell:cell.renderSelectGroup({name: group}),type:"group"});
            }
            listHtml += replaceByObj(tmplSelectLi,
                {cell:cell.renderSelectCell({...list, multiple: cfg.multiple}),
                 type:"item"});
        }
        return tmplSelectUl.replace("{{lis}}",listHtml);
    }

    static renderSelectCell(cfg){
        let [iconHtml,badgeHtml,dataHtml] = ['','','',''];
        if(cfg.icon){
            iconHtml = replaceByObj(tmplIcon,{icon:cfg.icon,
                iconStyle:cfg.iconStyle||'',type:''
            })
        }
        if(cfg.image){
            iconHtml = replaceByObj(tmplImg,{icon:cfg.image,size:'',
                iconStyle:cfg.iconStyle||''
            })
        }

        if(cfg.badge)
            badgeHtml = tmplCellBadge.replace("{{badge}}",cfg.badge);

        if(cfg.name){
            dataHtml = replaceByObj(tmplData,{hint:'',
                data:cfg.name??''});
        }

        let cellHtml = replaceByObj(tmplSelectItem,{
                icon:iconHtml,data:dataHtml,badge:badgeHtml,
                code:cfg.code||''
            });

        return replaceByObj(tmplCell,{cell:cellHtml,width:'',type:'',
            style:'class="cell"', dataCode:''});
    };

    static renderSelectGroup(cfg){
        let cellHtml = replaceByObj(tmplData,{hint:'',
            data:cfg.name})
        return replaceByObj(tmplCell,{cell:cellHtml,
            width:'',type:'', style:'', dataCode:''});
    };

    static renderPivotXCell(cfg){
        let data = cfg.item;
        let cellHtml = replaceByObj(tmplData,{hint:'',
            data:data.name});
        return replaceByObj(tmplCell,{cell:cellHtml,width:'',type:cfg.type,
            style:replaceByObj(tmplCellStyle,{align:'center',style:''}),
            dataCode:data.code?tmplDataCode.replace("{{code}}",data.code):''});
    }

    static renderPivotYCell(cfg){
        let data = cfg.item;
        let cellHtml = replaceByObj(tmplData,{hint:'',
            data:data.name});
        return replaceByObj(tmplCell,{cell:cellHtml,width:'',type:cfg.type,
            style:replaceByObj(tmplCellStyle,{align:'center',style:''}),
            dataCode:data.code?tmplDataCode.replace("{{code}}",data.code):''});
    }

    static renderPivotVCell(cfg){
        let cellHtml ='';
        let key =cfg.key;
        let data = cfg.item;
        let style = (typeof key.style =='function')?key.style(data,key):key.style;
        if(key.callback)
            cellHtml = key.callback(data,key,cfg.pos);
        else{
            cellHtml = replaceByObj(tmplData,{hint:'',
                data:key.format?format(data[key.$data],key.format):(data[key.$data]??'')});
            let iconHtml ='',badgeHtml ='';
            if(key.$icon){
                iconHtml = replaceByObj(tmplIcon,{icon:data[key.$icon],
                    iconStyle:'',type:''
                })
            }
            if(key.$image){
                iconHtml = replaceByObj(tmplImg,{icon:data[key.$image],size:'',
                    iconStyle:''
                })
            }
            if(key.$badge)
                badgeHtml = tmplCellBadge.replace("{{badge}}",data[key.$badge]);

            cellHtml = iconHtml+cellHtml+badgeHtml;
        }
        let widthHtml ='';
        if(key.width)
            widthHtml = tmplMinWidth.replace('{{width}}',key.width);

        return replaceByObj(tmplCell,{cell:cellHtml,width:widthHtml,type:cfg.type,
            style:replaceByObj(tmplCellStyle,{align:key.align||'center',style:style||''}),
            dataCode:cfg.pos?tmplDataCode.replace("{{code}}",cfg.pos):''});
    }

    static renderPivotXTitle(cfg){
        let key = cfg.key;
        let widthHtml ='';
        if(key.width)
            widthHtml = tmplMinWidth.replace('{{width}}',key.width);
        let cellHtml = replaceByObj(tmplData,{hint:'',
            data:key.title});

        let filterHtml ='';
        if(key.filter){
            if(cfg.filterActive)
                filterHtml = replaceByObj(tmplIcon,{icon:'icon-f-filter active',iconStyle:'',type:'filter'});
            else
                filterHtml = replaceByObj(tmplIcon,{icon:'icon-f-filter',iconStyle:'',type:'filter'});
        }

        return replaceByObj(tmplCell,{cell:cellHtml+filterHtml,width:widthHtml,type:cfg.type,
            style:replaceByObj(tmplCellStyle,{align:'center',style:''}),
            dataCode:key.$code?tmplDataCode.replace("{{code}}",key.$code):''});
    }

    static renderPivotYTitle(cfg){
        let key = cfg.key;
        let widthHtml ='';
        if(key.width)
            widthHtml = tmplMinWidth.replace('{{width}}',key.width);
        let cellHtml = replaceByObj(tmplData,{hint:'',
            data:key.title});
        let filterHtml ='';
        if(key.filter){
            if(cfg.filterActive)
                filterHtml = replaceByObj(tmplIcon,{icon:'icon-f-filter active',iconStyle:'',type:'filter'});
            else
                filterHtml = replaceByObj(tmplIcon,{icon:'icon-f-filter',iconStyle:'',type:'filter'});
        }

        return replaceByObj(tmplCell,{cell:cellHtml+filterHtml,width:widthHtml,type:cfg.type,
            style:replaceByObj(tmplCellStyle,{align:'center',style:''}),
            dataCode:key.$code?tmplDataCode.replace("{{code}}",key.$code):''});

    }

    static renderPivotVTitle(cfg){
        let key = cfg.key;
        let widthHtml ='';
        if(key.width)
            widthHtml = tmplMinWidth.replace('{{width}}',key.width);
        let cellHtml = replaceByObj(tmplData,{hint:'',
            data:key.title});
        return replaceByObj(tmplCell,{cell:cellHtml,width:widthHtml,type:cfg.type,
            style:replaceByObj(tmplCellStyle,{align:key.titleAlign||'center',style:''}),
            dataCode:key.$code?tmplDataCode.replace("{{code}}",key.$code):''});

    }

    static renderMenuCell(cfg){

        let [iconHtml,levelHtml,badgeHtml,dataHtml,dropHtml] = ['','','','',''];
        if(cfg.icon){
            iconHtml = replaceByObj(tmplIcon,{icon:cfg.icon,
                iconStyle:cfg.iconStyle||'',type:'menu-icon'
            })
        }
        /*
        if(cfg.level)
            levelHtml = tmplLevel.replace('{{level}}',cfg.level); */
        if(cfg.badge)
            badgeHtml = tmplCellBadge.replace("{{badge}}",cfg.badge);

        if(cfg.data){
            dataHtml = replaceByObj(tmplData,{hint:'',
                data:cfg.data});
        }

        if(cfg.hasChildren){
            dropHtml = replaceByObj(tmplIcon,{icon:cfg.level==1?"icon-dropdown":"icon-dropright",
                    iconStyle:cfg.iconStyle||'',type:'menu-dropdown'
             })
        }
        let widthHtml='';


        let cellHtml ='';
        if(cfg.link)
            cellHtml = replaceByObj(tmplMenuLink,{level:'',link:cfg.link,
                drop:dropHtml,
                icon:iconHtml,data:dataHtml,badge:badgeHtml,linkTarget:cfg.linkTarget??'_self'});
        else
            cellHtml = iconHtml+dataHtml+badgeHtml+dropHtml;

        return replaceByObj(tmplCell,{cell:cellHtml,width:widthHtml,type:cfg.type||'nav-link',
            style:replaceByObj(tmplCellStyle,{align:'',style:cfg.style||''}),
            dataCode:cfg.code?tmplDataCode.replace("{{code}}",cfg.code):''});

    }

}

